<%@page import="com.cqeec.myblog.model.Album"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="include/resources.jsp"%>
<title>相册——我的博客</title>
</head>
<body>
	<div class="container-fluid">
		<%@include file="include/header.jsp"%>
		<br />
		<div class="row">
			<div class="col-2"></div>
			<div class="col-8">
				<%-- 创建博文 --%>
				<%
					if (blogger != null) {
				%>
				<a class="btn btn-primary"
					href="${contentPath}/album/management.html?m=create">创建相册</a> <br />
				<br />
				<%
					}
				%>
				<div class="row">
					<%
						List<Album> list = (List<Album>) request.getAttribute("list");
						for (Album a : list) {
					%>
					<div class="col-4">
						<div class="card-deck" style="margin-bottom: 20px;">
							<div class="card" id="c_<%=a.getId()%>">
								<a href="${contentPath}/album/photo.html?id=<%=a.getId()%>">
								<%
									if(a.getQuantity()==0){
								%>
									<img src="${contentPath}/images/no-photo.jpg" class="card-img-top" style="height:200px;" alt="<%=a.getName()%>">
								<%
									}else{
								%>	
									<img src="${contentPath}/data/<%=a.getCoverPhoto() %>" class="card-img-top"  style="height:200px;"  alt="<%=a.getName()%>">
								<%		
									}
								%>
									
									
									<div class="card-body">
										<h5 class="card-title"><%=a.getName()%></h5>
										<p class="card-text"><%=a.getDescription()%></p>
									</div>
								</a>
								<div class="card-footer">
									<small class="text-muted"><span
										style="color: red; font-weight: bold;"><%=a.getQuantity()%></span>&nbsp;张照片</small>
									<%
										if (blogger != null) {
									%>
									<div class="float-right">
										<button class="btn btn-danger btn-edit" id="<%=a.getId()%>"
											title="编辑相册信息">
											<i class="far fa-edit"></i>
										</button>
										<button class="btn btn-danger btn-del" id="<%=a.getId()%>"
											title="删除相册">
											<i class="far fa-trash-alt"></i>
										</button>
									</div>
									<div class="modal fade" id="editAlbumModal" tabindex="-1"
										role="dialog" aria-labelledby="editAlbumModalTitle"
										aria-hidden="true">
										<div class="modal-dialog modal-dialog-centered modal-lg"
											role="document">
											<div class="modal-content">
												<div class="modal-header">
													<h5 class="modal-title" id="editAlbumModalTitle">编辑相册信息</h5>
													<button type="button" class="close" data-dismiss="modal"
														aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body">
													<form
														action="<%=contentPath%>/album/management.html?m=save"
														method="post">
														<div class="form-group row">
															<label for="name" class="col-sm-2 col-form-label">相册名：</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" id="name"
																	name="name" placeholder="请输入相册名">
															</div>
														</div>
														<div class="form-group row">
															<label for="description" class="col-sm-2 col-form-label">相册描述：</label>
															<div class="col-sm-10">
																<textarea class="form-control" id="description"
																	name="description"></textarea>
															</div>
														</div>
													</form>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-primary">保存</button>
													<button type="button" class="btn btn-secondary"
														data-dismiss="modal">取消</button>
												</div>
											</div>
										</div>
									</div>
									<%
										}
									%>
								</div>
							</div>
						</div>
					</div>
					<%
						}
					%>
				</div>
			</div>
			<div class="col-2"></div>
		</div>

		<div class="row" style="margin: 20px 0px;">
			<div class="col">
				<p class="text-center">&copy;2018&nbsp;&nbsp;&nbsp;重庆信息技术职业学院&nbsp;&nbsp;&nbsp;软件学院&nbsp;&nbsp;&nbsp;软件开发教研室&nbsp;&nbsp;&nbsp;唐礼飞</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$(".btn-edit").click(function() {
				id = $(this).attr("id");
				$("#name").val($("#c_" + id + " .card-title").text());
				desc = $("#c_" + id + " .card-text").text();
				$("#description").val(desc);
				$('#editAlbumModal').modal('show');
			});

			$(".btn-del").click(function() {
				id = $(this).attr("id");
				$.ajax({
					url : "${contentPath}/album/management.html?m=del",
					type : "POST",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code === 0) {
							$("#c_" + id).remove();
						}
						alert(result.message);
					},
					error : function() {
						alert("请求失败！");
					}
				});
			});
		});
	</script>
</body>
</html>